<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ include file="/WEB-INF/common/taglib.jsp"%>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions"%>
<!DOCTYPE HTML>
<html>
<head>
</head>
<body>
	<section class="ui-container" style="background-image: url(${ctx}/static/wechat/images/1.png)">
		<section id="tab">
			<div class="demo-item">
				<div class="ui-flex ui-flex-pack-center">
					<li class="" style="text-align: center;">
						<font>&nbsp;</font>
						<div class="ui-flex ui-flex-pack-center">
							<div class="ui-avatar-lg">
								<span style="background-image:url(${userinfo.headurl })"></span>
							</div>
						</div>
						<div class="ui-flex ui-flex-pack-center">
							<p style="margin: 10px">${userinfo.name }</p>
						</div>

					</li>
				</div>
				<div class="ui-flex ui-flex-pack-center">
					<section class="ui-panel ui-panel-pure" style="width: 90%">
						<div class="ui-tab" id="tab1">
						    <ul class="ui-tab-nav ui-border-b">
						       <li onclick="switchToQuestion(this,'recentNewsFrame')" class="current">我的动态</li>
						       <li onclick="switchToQuestion(this,'myQuestionFrame')">我的问题</li>
						    </ul>
							<ul class="ui-list ui-list-pure ui-border-tb" >
								<li id="recentNewsFrame"></li>
								<li id="myQuestionFrame"></li>
							</ul>
						</div>
					</section>
				</div>
			</div>
		</section>
	</section>
	
	<script type="text/javascript">
		// 初始化页数
		var pageNumber = {"newsPage":1,"questionPage":1};	
		
		// 默认初始化我的动态
		dropLoad("${ctx}/wechat/faq/myNews","recentNewsModel","#recentNewsFrame",pageNumber.newsPage)
		dropLoad("${ctx}/wechat/faq/myQuestions","questionModel","#myQuestionFrame",pageNumber.questionPage)
		
		// 切换列表方法
		function switchToQuestion(that,target){
			$(that).siblings().removeClass("current");
			$(that).addClass("current");
			
			$("#"+target).siblings().hide();
			$("#"+target).show();
		}
		
		function dropLoad(url,modelName,target,page) {
			$("#xxx").dropload({
			    scrollArea : window,
			    loadDownFn : function(me){
			        $.ajax({
			            type: 'GET',
			            url: url,
			            dataType: 'json',
			            data: {"pageNumber":page},
			            success: function(result){
			            	if (result.centerList.rows.length != 0) {
			            		var html = template(modelName, result.centerList);
			            		$(html).appendTo(target);
			            		page ++ ;
				                // 每次数据加载完，必须重置
				                me.resetload();
			            	} else {
			            		$("<li class='ui-txt-muted' style='text-align:center'>已无更多内容</li>").appendTo(target);
			            	}
			            },
			            error: function(xhr, type){
			                /*alert('Ajax error!');
			                // 即使加载出错，也得重置
			                me.resetload();*/
			            }
			        });
			    }
			});
		}
		
		$("#myQuestionFrame").hide();
	</script>
	
	<script id="recentNewsModel" type="text/html">
		{{each rows as item i}}
			<li class="ui-border-t">
				<h5 class="ui-flex">
					<span class="ui-flex-align-center ui-avatar-tiled" style="margin-top: 22%;">
						<span style="background-image:url({{item.commentHeadUrl}})"></span>
					</span>
					<span class="ui-flex ui-flex-align-center" style="width: 78%;">&nbsp; {{item.commentName}} 回复了你的问题：</span>
				</h5>
				<a href="./detail?id={{item.questionId}}" class="ui-nowrap-multi">
					<h4 class="ui-nowrap-multi" style="-webkit-line-clamp: 2">{{item.comment}}</h4>
					<h5 class="ui-txt-muted ui-nowrap-multiui-txt-info" style="-webkit-line-clamp: 3">来自问题：{{item.questionContent}}</h5>
				</a>
				<h6><i class="ui-flex ui-flex-align-center ui-txt-muted" style="font-size: 11px;">{{item.createTime}}</i></h6>
			</li>
		{{/each}}
	</script>
	
	<script id="questionModel" type="text/html">
		{{each rows as item i}}
			<a href="./detail?id={{item.id}}">
				<div class="ui-form-item ui-form-item-link ui-border-b ui-nowrap">
            		{{item.questtionContent}}
					<font style="font-size: 10px;" class="ui-txt-muted">{{item.createTime}}</font>
        		</div>
			</a>
		{{/each}}
	</script>
</body>
</html>